<template>
  <view class="tab-bar">
    <view
      class="tab-bar-item"
      :class="[activeTab === item.key ? 'is_active' : '']"
      v-for="item in tabList"
      :key="item.key"
      :data-path="item.path"
      @click="($event) => handleClick($event, item)"
    >
      <view class="tab-bar-item__icon">
        <i class="iconfont icon" :class="item.icon"></i>
      </view>
      <view class="tab-bar-item__title">
        <span>{{ item.title }}</span>
      </view>
    </view>
  </view>
</template>
<script lang="ts">
export default {
  name: 'tabBar',
  props: {
    activeTab: {
      type: String,
      default: 'index',
    },
  },
  data() {
    return {
      tabList: [
        {
          icon: 'icon-rili',
          title: '首页',
          key: 'index',
          path: 'pages/index/index',
        },
        // {
        //   icon: 'icon-rili',
        //   title: '统计',
        //   key: 'statistics',
        // },
        {
          icon: 'icon-wode',
          title: '我的',
          key: 'personal',
          path: 'pages/personal/index',
        },
      ],
    }
  },
  methods: {
    handleClick(tab: any, item: any) {
      console.log('🐛 ~ file: index.vue ~ line 48 ~ handleClick ~ tab', tab)
      const page = getCurrentPages()
      const path = tab.currentTarget.dataset.path
      if (path === page[page.length - 1].route) {
        return
      } else {
        // uni.navigateTo({ url: `/${path}` })
        uni.reLaunch({
          url: `/${path}`,
        })
      }
      // this.$emit('click', tab)
    },
  },
}
</script>
<style lang="less" scoped>
.tab-bar {
  width: 100vw;
  height: 100rpx;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  z-index: 99;
  border-top: 2rpx solid #eee;
  .tab-bar-item {
    height: 100%;
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 24rpx;
    z-index: inherit;
    .tab-bar-item__icon {
      .iconfont {
        font-size: 40rpx;
      }
    }
    &.is_active {
      // color: #2ab1e8;
      // color: #69c9d7;
      color: #87cefa;
    }
  }
}
</style>